﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Live Cropping Demo</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <script src="/Content/js/jquery-1.8.2.js"></script>
    <script src="/Content/jcrop/js/jquery.Jcrop.js"></script>
    <link rel="stylesheet" href="/Content/jcrop/demos/demo_files/main.css" type="text/css" />
    <link rel="stylesheet" href="/Content/jcrop/demos/demo_files/demos.css" type="text/css" />
    <link rel="stylesheet" href="/Content/jcrop/css/jquery.Jcrop.css" type="text/css" />

    <script type="text/javascript">
        var jcrop_api;
        $(function () {

            $('#cropbox').Jcrop({
                //aspectRatio: 1,
                onSelect: updateCoords
            }, function () {
                jcrop_api = this;
            });

        });

        function updateCoords(c) {
            $('#x').val(c.x);
            $('#y').val(c.y);
            $('#w').val(c.w);
            $('#h').val(c.h);
        };

        function checkCoords() {
            if (parseInt($('#w').val())) return true;
            alert('Please select a crop region then press submit.');
            return false;
        };

        //本地上传图片预览
        function LocalImagePreview(source) {
            if ($.browser.msie && ($.browser.version == "7.0" || $.browser.version == "8.0")) {
                var src = $(source).val();
                jcrop_api.setImage("file:///" + src);
                //$("#cropbox").attr("src", "file:///" + src);
                //$("#cropbox").next().find("img").attr("src", "file:///" + src);
            } else {
                var objFile = source.files[0];//选择上传的文件
                var objFileReader = new FileReader();
                objFileReader.readAsDataURL(objFile);//Base64
                $(objFileReader).load(function () {
                    jcrop_api.setImage(this.result);
                    //$("#cropbox").attr("src", this.result);
                    //$("#cropbox").next().find("img").attr("src", this.result);
                });
            }
        }

    </script>
    <style type="text/css">
        #target {
            background-color: #ccc;
            width: 500px;
            height: 330px;
            font-size: 24px;
            display: block;
        }
    </style>

</head>
<body>

    <div class="container">
        <div class="row">
            <div class="span12">
                <div class="jc-demo-box">

                    <div class="page-header">
                        <ul class="breadcrumb first">
                            <li><a href="/index.html">Jcrop</a> <span class="divider">/</span></li>
                            <li><a href="/index.html">Demos</a> <span class="divider">/</span></li>
                            <li class="active">Live Demo (Requires PHP)</li>
                        </ul>
                        <h1>Server-based Cropping Behavior</h1>
                    </div>

                    <!-- This is the image we're attaching Jcrop to -->
                    <img src="/Content/jcrop/demos/demo_files/pool.jpg" id="cropbox" />

                    <!-- This is the form that our event handler fills -->
                    <form action="/Jcrop/SubmitCut" method="post" onsubmit="return checkCoords();" enctype="multipart/form-data">
                        <input type="hidden" id="x" name="x" />
                        <input type="hidden" id="y" name="y" />
                        <input type="hidden" id="w" name="w" />
                        <input type="hidden" id="h" name="h" />
                        <input type="file" name="imgfile" accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp" onchange="LocalImagePreview(this);" />
                        <input type="submit" value="Crop Image" class="btn btn-large btn-inverse" />
                    </form>

                    <p>
                        <b>An example server-side crop script.</b> Hidden form values
			are set when a selection is made. If you press the <i>Crop Image</i>
                        button, the form will be submitted and a 150x150 thumbnail will be
			dumped to the browser. Try it!
                    </p>


                </div>
            </div>
        </div>
    </div>
</body>

</html>
